<template>
  <div class="sc-list-table">
    <el-table v-loading="loading" :max-height="540" :border="true" :data="listData" @selection-change="handleSelectionChange">
      <ListTableItem v-for="(item, index) in tableCol" :key="index" :attrs="item">
        <template v-if="item.custom" :slot="item.custom" slot-scope="scope">
          <slot :name="item.custom" v-bind="scope"></slot>
        </template>
      </ListTableItem>
    </el-table>
    <div v-if="page" class="sc-list-table-pager">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="pagerData.pageIndex"
        :total="pagerData.count"
        :page-size="pagerData.pageSize"
        :page-sizes="[10, 20, 30, 40, 50]"
        @current-change="pageChange"
        @size-change="pageSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import ListTableItem from './components/ListTableItem'
  import request from '@/utils/request'
  import { mapGetters } from 'vuex'
  export default {
    components: {
      ListTableItem
    },
    props: {
      hed: {
        type: String,
        default() {
          return ''
        }
      },
      page: {
        type: Boolean,
        default() {
          return true
        }
      },
      loading: {
        type: Boolean,
        default() {
          return false
        }
      },
      tableData: {
        type: Array,
        default() {
          return []
        }
      },
      tableCol: {
        type: Array,
        default() {
          return []
        }
      },
      pager: {
        type: Object,
        default() {
          return {}
        }
      },
      noQuery: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    data() {
      return {
        listData: [],
        ary: false,
        pagerData: {
          pageIndex: 1,
          count: 0,
          pageSize: 10,
          ...this.pager
        },
        // 是否使用接口查询
        interfaceSwitch: false,
        interfaceUrl: ''
      }
    },
    computed: {
      ...mapGetters([
        'attendanceDate'
      ])
    },
    watch: {
      tableData: function (newValue, oldValue) {
        this.listData = newValue
      }
    },
    methods: {
      handleSelectionChange(event) {
        this.$emit('selectChange', event)
      },
      async setQuery(query) {
        this.$store.dispatch('user/setPageData', { pageIndex: query.pageIndex, pageSize: query.pageSize })
        query = Object.assign({}, this.$route.query, query)

        if (this.interfaceSwitch) {
          let res = await request(this.interfaceUrl, 'GET', query)
          this.listData = res.data.items
        } else {
          this.$router
            .push({
              query
            })
            .catch(err => {
              console.error(err)
            })
        }
      },
      pageSizeChange(pageSize) {
        this.$emit('size-change', pageSize)
        if (this.noQuery === false) {
          this.setQuery({
            pageSize,
            pageIndex: 1
          })
        }
      },
      pageChange(pageIndex) {
        this.$emit('page-change', pageIndex)

        if (this.noQuery === false) {
          const tmpObj = this.attendanceDate.status ? {
            pageIndex,
            pageSize: this.pagerData.pageSize,
            orderBy: "createdTime",
            orderByAscent: false,
            EnterTimeStart: this.attendanceDate.EnterTimeStart,
            EnterTimeEnd: this.attendanceDate.EnterTimeEnd
          } : {
              pageIndex,
              pageSize: this.pagerData.pageSize,
              orderBy: "createdTime",
              orderByAscent: false
            }
          this.setQuery(tmpObj)
        }
      },
      update({ page, count }, url = false) {
        if (url) {
          this.interfaceSwitch = true
          this.interfaceUrl = url
        }
        this.pagerData.pageIndex = page
        this.pagerData.count = count
        if (this.noQuery === false) {
          const { pageSize } = this.$route.query
          if (pageSize) this.pagerData.pageSize = this._.toSafeInteger(pageSize)
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
